import { right, codeDom, menus as menuDom, changeMenu } from './layout'
import menus from './menus'
import GraphBack from '../src'

function highlight() {
  ;(window as any).hljs.initHighlightingOnLoad()
  ;(window as any).hljs.initLineNumbersOnLoad()
  ;(window as any).hljs.highlightAll()
}

export function createElement(name: string, parent: HTMLElement, className?: string) {
  const dom = document.createElement(name)
  if (className) dom.className = className
  parent.appendChild(dom)
  return dom
}

export function initRightDocument() {
  right.innerHTML = ''
  let iframe = createElement('div', right, 'right-document')
  return { iframe }
}

export function initRightExample() {
  right.innerHTML = ''
  let example = createElement('div', right)
  example.style.height = example.style.width = '100%'
  example.style.display = 'flex'
  example.appendChild(codeDom)
  let iframe = createElement('iframe', example)
  iframe.style.flex = codeDom.style.flex = '1'
  iframe.style.borderLeft = 'var(--border-style)'
  let div = createElement('div', example)
  return { div, iframe }
}

export function initRightBackground() {
  right.innerHTML = ''
  let background = createElement('div', right)
  background.style.height = background.style.width = '100%'
  background.style.display = 'flex'
  background.appendChild(codeDom)
  let iframe = createElement('iframe', background)
  iframe.style.flex = '0.6'
  codeDom.style.flex = '0.4'
  iframe.style.borderLeft = 'var(--border-style)'
  return iframe
}

export function getStaticFile(path: string) {
  // 创建一个新的xhr对象
  let xhr = new XMLHttpRequest()
  const okStatus = document.location.protocol === 'file' ? 0 : 200
  xhr.open('GET', location.origin + (location.pathname == '/' ? '' : location.pathname) + path, false)
  xhr.overrideMimeType('text/html;charset=utf-8')
  xhr.send(null)
  let file = xhr.responseText.replace(`import GraphBack from '../../src'\n`, '')
  return xhr.status === okStatus ? file : null
}

export function renderExampleMenus() {
  menuDom.innerHTML = ''
  for (let i = 0; i < menus.exampleMenus.length; i++) {
    let menu = createElement('div', menuDom)
    menu.innerText = menus.exampleMenus[i]
    menu.onclick = () => changeMenu(menus.exampleMenus[i])
  }
}

export function renderBackgroundMenus() {
  menuDom.innerHTML = ''
  for (let i = 0; i < menus.backgroundMenus.length; i++) {
    let filePath = '/background/' + menus.backgroundMenus[i] + '.js'
    let file = getStaticFile(filePath) as string
    let iframe = createElement('iframe', menuDom) as any
    iframe.style.flex = '1'
    iframe.style.height = '200px'
    let win = iframe.contentWindow
    iframe.contentWindow.GraphBack = GraphBack
    let bg = createElement('div', win.document.body, 'graph-background')
    bg.style.height = '184px'
    let script = createElement('script', win.document.body) as HTMLScriptElement
    script.textContent = file
    bg.onclick = () => changeMenu(menus.backgroundMenus[i])
  }
}

export function renderDocumentMenus() {
  menuDom.innerHTML = ''
  for (let i = 0; i < menus.documentMenus.length; i++) {
    let menu = createElement('div', menuDom)
    menu.innerText = menus.documentMenus[i]
    menu.onclick = () => changeMenu(menus.documentMenus[i])
  }
}

export function renderDocumentCanvas(path: string, iframe) {
  iframe.innerHTML = ''
  let filePath = '/document/' + path + '.html'
  let file = getStaticFile(filePath) as string
  if (path == '2.api') {
    let div = document.createElement('div')
    div.innerHTML = file
    div.style.height = div.style.width = '100%'
    iframe.appendChild(div)
    let script = document.createElement('script')
    script.textContent = `var frame = document.getElementById('frame')
    var loading = document.getElementById('loading')
    frame.contentWindow.addEventListener('DOMContentLoaded', () => loading.style.display="none")`
    iframe.appendChild(script)
  } else {
    iframe.innerHTML = file
    highlight()
  }
}

export function renderExampleCanvas(path: string, iframe) {
  codeDom.innerHTML = ''
  let filePath = '/example/' + path + '.js'
  let file = getStaticFile(filePath) as string
  let pre = createElement('pre', codeDom)
  let code = createElement('code', pre)
  code.innerHTML = file
  highlight()
  // 图形
  let win = iframe.contentWindow
  iframe.contentWindow.GraphBack = GraphBack
  let script = createElement('script', win.document.body) as HTMLScriptElement
  script.textContent = file
}

export function renderBackgroundCanvas(path: string, iframe) {
  codeDom.innerHTML = ''
  let filePath = '/background/' + path + '.js'
  let win = iframe.contentWindow
  let body = win.document.body
  // code
  let file = getStaticFile(filePath) as string
  let pre = createElement('pre', codeDom)
  let code = createElement('code', pre)
  code.innerHTML = file
  highlight()
  // layout
  body.style.display = 'flex'
  body.style.flexDirection = 'column'
  body.style.height = 'calc(100% - 20px)'
  body.style.overflow = 'hidden'
  let up = createElement('div', body)
  let down = createElement('div', body, 'graph-background')
  up.style.flex = '0.7'
  up.style.overflow = 'hidden'
  up.style.display = 'flex'
  down.style.flex = '0.3'
  let left = createElement('div', up)
  let right = createElement('div', up)
  left.style.flex = right.style.flex = '1'
  left.style.display = right.style.display = 'flex'
  left.style.flexDirection = right.style.flexDirection = 'column'
  let left1 = createElement('div', left, 'graph-background')
  let left2 = createElement('div', left, 'graph-background')
  left1.style.flex = left2.style.flex = '1'
  let right1 = createElement('div', right, 'graph-background')
  let right2 = createElement('div', right, 'graph-background')
  let right3 = createElement('div', right, 'graph-background')
  right1.style.flex = right2.style.flex = right3.style.flex = '1'
  // 图形
  iframe.contentWindow.GraphBack = GraphBack
  let script = createElement('script', body) as HTMLScriptElement
  script.textContent = file
}
